<template>
  <!-- 担保台账  -->
    <div class="interestCalculationDetailsPage">
        <div class="search-wrap d-flex a-center">
            <div class="search-item d-flex a-center m-l20">
                <label>担保人</label>
                <el-select class="m-l10" v-model="form.guaranteeCompanyId" clearable>
                    <el-option v-for="(item,index) in companyList" :key="index" :label="item.companyName" :value="item.companyId"></el-option>
                </el-select>
            </div>
            <div class="search-item d-flex a-center m-l20">
                <label>被担保人</label>
                <el-select class="m-l10" v-model="form.wasGuaranteedCompanyId" clearable>
                    <el-option v-for="(item,index) in companyList" :key="index" :label="item.companyName" :value="item.companyId"></el-option>
                </el-select>
            </div>
            <div class="search-item d-flex a-center m-l20">
                <label>担保性质</label>
                <el-select class="m-l10" v-model="form.type" clearable>
                    <el-option label="对内担保" value="1"></el-option>
                    <el-option label="对外担保" value="2"></el-option>
                    <el-option label="对内借款" value="3"></el-option>
                    <el-option label="对外借款" value="4"></el-option>
                </el-select>
            </div>
            <div class="search-buttons m-l50 d-flex a-center">
                <el-button
                        color="#fc702b"
                        style="color:#fff;"
                        @click.prevent="onQuery"
                >查询</el-button>
                <el-button
                        color="#f0f0f0"
                        style="color: #000000"
                        @click.prevent="onReset"
                >重置</el-button>
                <el-divider class="m-l20 m-r20" direction="vertical" />
                <el-button
                    @click="addHandle"
                    class="button_edit m-r10"
                >新增担保信息</el-button>
                <el-button
                        class="button_edit"
                        @click.prevent="deleteBankGuarantee"
                >删除</el-button>
                <el-button
                        class="button_edit"
                        @click="onExport"
                >
                    <svg-icon icon-class="project-detail-icon-derive" class="icon-export m-r5"></svg-icon>
                    一键导出
                </el-button>
            </div>
        </div>
        <public-table
                ref="publicTableRef"
                class="m-t20"
                index
                selection
                :page="page"
                :tableData="tableData"
                :tableOption.sync="tableOption"
                @page-change="onPageChange"
                @handle-selection-change="handleSelectionChange"
        >
            <template #guaranteeCompanyName="scope">
                <span
                    style="cursor: pointer;color: #fc7037;"
                    @click="toDetails(scope.row)"
                >{{scope.row.guaranteeCompanyName}}</span>
            </template>
        </public-table>
    </div>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import {
    ElSelect,
    ElOption,
    ElDivider, ElMessage, ElMessageBox,
} from "element-plus";
import PublicTable from "@/components/PublicTable.vue";

import {tableCommonFun} from "@/hooks/tableCommon";
import {companyApi, guaranteeApi, interestManagement} from "@/api/businessFinance";
import {useRouter} from "vue-router";

const interfaceConfig = reactive({
    fileName:'businessFinance',
    apiPath:'guaranteeApi.pastryList',
});
const exportConfig = reactive({
    fileName:'businessFinance',
    apiPath:'exportApi.leadingOut',
    tableName:'担保台账表'
});
const {
    form,
    page,
    tableOption,
    tableData,
    selectedArr,
    onQuery,
    onReset,
    onPageChange,
    getData,
    onExport,
    handleSelectionChange
}  = tableCommonFun(interfaceConfig,exportConfig);

form.value = {
    guaranteeCompanyId:'',
    wasGuaranteedCompanyId:'',
    type:''
}

tableOption.value = [
    { label: "担保公司", prop: "guaranteeCompanyName",slot:true, minWidth: 100 },
    { label: "被担保公司", prop: "wasGuaranteedCompanyName", minWidth: 100 },
    { label: "对内担保金额", prop: "internalGuaranteeAmount", minWidth: 120 },
    { label: "对外担保金额", prop: "externalGuaranteeAmount", minWidth: 120 },
    { label: "对内借款金额", prop: "internalBorrowingAmount", minWidth: 120 },
    { label: "对外借款金额", prop: "externalBorrowingAmount", minWidth: 120 }
];


const companyList = ref([]);
/**
 * 查公司列表
 */
const getCompanyList = () => {
    companyApi.getList({}).then(res=>{
        companyList.value = res.data;
    });
}

/**
 * 删除担保按钮
 */
const deleteBankGuarantee = () => {
  if (selectedArr.value.length === 0) {
    ElMessage.warning('请选择要删除的行!');
    return;
  }
  ElMessageBox.alert(`已选择${selectedArr.value.length}条数据，是否删除？`, '提示', {
    confirmButtonText: '确认',
    confirmButtonClass: "button_view",
    callback: (action) => {
      if (action === 'confirm') {
        guaranteeApi.deleteBankGuarantee({
          list: selectedArr.value.map(item => { return item.guaranteeId })
        }).then(res => {
          if (res.code === '200') {
            ElMessage.success('删除成功!');
            page.current = 1;
            page.size = 10;
            getData({
              pageNum: 1,
              pageSize: 10
            });
          }
        })
      }
    },
  })
};

/**
 * 跳转担保详情页
 * @param row
 */
const router = useRouter();
const toDetails = (row) => {
    router.push({path:`/businessFinance/bankManagement/financingLedger/guaranteeDetails/${row.guaranteeCompanyId}`});
}

/**
 * 跳转新增担保信息页面
 */
const addHandle = () => {
    router.push({path:`/businessFinance/bankManagement/financingLedger/addGuaranteeInformation`});
}

onMounted(()=>{
    getData({
        pageNum:1,
        pageSize:10
    });
    getCompanyList();
});
</script>

<style lang="scss" scoped>
.interestCalculationDetailsPage{
  .search-wrap{
    .search-item{

      .el-input{
        width: auto !important;
      }
    }
    .search-buttons{
      .icon-export{
        width: 18px;
        height: 18px;
      }
    }
  }
}
.public-dialog-content{
  .dialog-title-box{
    height: 30px;
    span{
      font-size: 15px;
      font-weight: 600;
    }
  }
}
</style>
